<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />  
<script language="javascript" type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.fusiondevs.com/lab/cleary/js/custom.js"></script>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<title>Cleary by Fusiondevs</title>
</head>

<body>

<div class="header">
	<div class="top">
    	<div class="contents">
	    	<h1><a href="index.html" class="logo"></a></h1>
        </div>
    </div>
    <div class="middle">
    	<div class="contents">
	        <span>Personal website mobile template</span>
        </div>
    </div>
</div>

<div class="container">

	<div class="contents">
        <h1>H1: Headings</h1>
        <h2>H2 heading</h2>
        <h3>H3 heading</h3>
        <h4>H4 heading</h4>
        <h5>H5 heading</h5>
    </div>
    
    <div class="contents">
    	<h1>Paragraphs</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis nisi dolor. Etiam eu augue ligula. Aliquam diam urna, rhoncus vel sagittis et, hendrerit id arcu. </p>
        <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis nisi dolor. Etiam eu augue ligula. Aliquam diam urna, rhoncus vel sagittis et, hendrerit id arcu. </p>
        <p class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis nisi dolor. Etiam eu augue ligula. Aliquam diam urna, rhoncus vel sagittis et, hendrerit id arcu. </p>
        <p class="quotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis nisi dolor. Etiam eu augue ligula. Aliquam diam urna, rhoncus vel sagittis et, hendrerit id arcu. </p>
    </div>    
    
    <div class="contents">
    	<h1>Info boxes</h1>
        <p class="infobox yellow">
            <span>Yellow Box Title</span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis nisi dolor. Etiam eu augue ligula.
        </p>
        <p class="infobox blue">
            <span>Blue Box Title</span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis nisi dolor. Etiam eu augue ligula.
        </p>
        <p class="infobox green">
            <span>Green Box Title</span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis nisi dolor. Etiam eu augue ligula.
        </p>
        <p class="infobox red">
            <span>Red Box Title</span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis nisi dolor. Etiam eu augue ligula.
        </p>
    </div>
    
    <div class="contents">
    	<h1>Forms</h1>
        
        <label>Input</label>
        <input type="text" />
        Checkbox <input type="checkbox" /><br />
        Radio <input type="radio" />
        
        <label>Textarea</label>
        <textarea rows="7" cols="10"></textarea>
        
        <label>Select</label>
        <select>
        	<option value="1">Option #1</option>
            <option value="2">Option #2</option>
            <option value="3">Option #3</option>
        </select>
        
        <input type="submit" value="Submit" />
    </div>
    
    <div class="contents">
    	<h1>Navigation buttons</h1>
    </div>
    <a href="#" class="bigmenu">Menu</a>
    <a href="#" class="smallmenu">Menu</a>
    
</div>
<div class="contents">
    <div class="footer">
        <span class="copy">&copy; 2011 <a href="http://www.fusiondevs.com/">Fusiondevs.com</a><br />Powered by Cleary</span>
        <a href="#" class="top">Top</a>
    </div>
</div>

</body>

</html>
